<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-21 09:46:03
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback title="常用信息">
    <view class="list">
      <z-paging ref="paging" v-model="list" @query="queryList">
        <view class="inner-list">
          <view class="single" :class="{ 'active': v.id == current }" v-for="v in list" :key="v.id">{{ v.username }} {{
            v.gender }} {{ v.age }}岁 {{ v.mobile }}
          </view>
        </view>
        <view @click="linkTo('/pages/settings/addCommon')" class="add single">
          <image class="add-icon" mode="aspectFill" src="../../static/img/icon/common-add-icon.png"></image>
          <view class="txt">添加常用人信息</view>
        </view>
      </z-paging>
    </view>
  </l-page>
</template>

<script>
export default {
  name: "commonInfo",
  components: {},
  data() {
    return {
      screen: {
        limit: "",
        page: "",
      },
      list: [{
        id: 0,
        username: '玛卡巴卡',
        gender: '女',
        age: '24',
        mobile: '12345678910',
      },],
      current: 0
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    queryList(pageNo, pageSize) {
      this.screen.page = pageNo;
      this.screen.limit = pageSize;
      this.getList();
    },
    getList() {
      this.$refs.paging.complete(this.list);
    },
    linkTo(url) {
      this.$util.linkTo(url);
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.list {
  padding: 20upx;

  .single {
    .flex();
    width: 100%;
    height: 100upx;
    background: #FFFFFF;
    border-radius: 8upx;
  }

  .inner-list {
    .single {
      margin-bottom: 20upx;
      padding: 0 20upx;
      font-size: 28upx;
      color: #333333;
      line-height: 36upx;
    }

    .active {
      background: #E8FFEF;
      border: 2upx solid #6ABE83;
    }
  }

  .add {
    justify-content: center;

    .txt {
      margin-left: 20upx;
      font-size: 28upx;
      color: #333333;
      line-height: 36upx;
    }
  }

  .add-icon {
    width: 30upx;
    height: 30upx;
  }
}
</style>